<template>
    <div class="comreadbuy">
        <ul v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loadingCommit"
            infinite-scroll-distance="1" class="listbuy">
            <li v-for="item in items" :key="item.id">
                <div class="bgimg"><img :src="item.activity_cover" alt=""></div>
                <div class="listbuycontent">
                    <div class="lbcleft">
                        <div class="dutitle">{{item.activity_name}}</div>
                        <div class="duday">{{item.totaltime}}Day</div>
                        <div class="dumoney">
                            <div class="dumoneynow">{{item.actual_price}}</div>
                            <div class="dumoneyyuan">原价¥{{item.original_price}}</div>
                        </div>
                    </div>
                    <div class="lbcright" @click="buynow(item)">查看详情</div>
                </div>
            </li>
            <li class="nobuycommon" v-if="isnoaction">
                <div class="nobuyimg"><img :src="nobuyimg" alt=""></div>
                <div class="nobuyills">共读活动筹备中，敬请期待...</div>
            </li>
        </ul>
        <TextPopup :options="PopupConfig" v-if="Popup" @hide="hidepopup" @ok="ok()" @call="call()"
                   @fall="fall()">
        </TextPopup>
        <TextPopup :options="PopupConfigVip" v-if="vipPopup" @hide="hidepopup" @ok="ok()" @call="call()"
                   @fall="vipfall()">
        </TextPopup>
    </div>
</template>

<script>

    export default {
        name: 'index',
        data: function () {
            return {
                items: [],
                tems: [],
                nobuyimg: require('../../assets/img/ComreadInvitecodeBuy/invalid-name.png'),
                Popup: false,
                vipPopup: false,
                loadingCommit: false,
                PopupConfig: {
                    btnStyle: {
                        width: '70%',
                        height: '4rem',
                        background: '#ffd000',
                        borderRadius: '4rem',
                        color: '#66440a',
                        fontSize: '1.8rem',
                        // boxShadow: '0 10px 24px 0 rgba(255, 208, 0, 0.4)'
                    },
                    btnText: '继续购买',
                    btnClick: 'fall',
                    title: '温馨提示',
                    content: '您所剩的会员时长已不足完成共读活动，可能无法领取共读活动奖励，继续参与吗？',
                    textStyle: {
                        lineHeight: '2rem',
                        fontSize: '1.5rem',
                        color: '#999'
                    },
                    Dis: false,
                    icon: true,
                    btnnum: 1,
                    num: 0,
                },
                PopupConfigVip: {
                    btnStyle: {
                        width: '70%',
                        height: '4rem',
                        background: '#ffd000',
                        borderRadius: '4rem',
                        color: '#66440a',
                        fontSize: '1.8rem',
                        // boxShadow: '0 10px 24px 0 rgba(255, 208, 0, 0.4)'
                    },
                    btnText: '加入会员',
                    btnClick: 'vipfall',
                    title: '温馨提示',
                    content: '抱歉，你还不是十分读书的会员，不能参与共读活动哦～',
                    textStyle: {
                        lineHeight: '2rem',
                        fontSize: '1.5rem',
                        color: '#999'
                    },
                    Dis: false,
                    icon: true,
                    btnnum: 1,
                    num: 0,
                },
                page_index: 1,
                datas: {},
                vip_expire_timestamp: '',
                isVip: 0,
                isnoaction: false
            }
        },
        mounted: function () {
        },
        methods: {
            updata: function (data) {
                this.$axios.activity(data).then(res => {
                    this.isVip = res.data.qing_data.is_vip
                    if (res.data.qing_data.vip_expire_timestamp) {
                        this.vip_expire_timestamp = res.data.qing_data.vip_expire_timestamp
                    }
                    if (res.data.qing_data.list.length !== 0) {
                        this.items = this.items.concat(res.data.qing_data.list)
                        this.items.map((item) => {
                            // 共读时间开始实际-结束时间
                            item.totaltime = Math.ceil((new Date(item.activity_end_time.replace(/\-/g, "/")) - new Date(item.activity_start_time.replace(/\-/g, "/"))) / 1000 / 60 / 60 / 24)
                        })
                    } else {
                        this.isnoaction = true
                        this.loadingCommit = true
                        this.page_index--
                    }
                })
            },
            buynow: function (data) {
                if (!this.isVip) {
                    this.vipPopup = true
                } else if (new Date(this.vip_expire_timestamp.replace(/\-/g, "/")) - new Date(data.activity_end_time.replace(/\-/g, "/")) < 0) {
                    // this.datas = data
                    this.go('ComreadBuyinfo', {goods_id: data.goods_id, goods_unit_id: data.goods_unit_id})
                    // this.Popup = true
                } else {
                    this.go('ComreadBuyinfo', {goods_id: data.goods_id, goods_unit_id: data.goods_unit_id})
                }

            },
            hidepopup: function () {
                this.Popup = false
                this.vipPopup = false
            },
            fall: function () {
                this.hidepopup()
                this.go('ComreadBuyinfo', {goods_id: this.datas.goods_id, goods_unit_id: this.datas.goods_unit_id})
            },
            vipfall: function () {
                this.hidepopup()
                this.go('BuyVip')
            },
            loadMore: function () {
                var data = {
                    page_index: this.page_index++
                }
                this.updata(data)
            },
            go: function (name, obj) {
                this.$router.push({
                    name: name,
                    query: obj || {}
                })
            }
        },
        components: {
            TextPopup: () => import('../../components/TextPopup/index')
        }
    }
</script>

<style scoped>
    @import "../../assets/css/views/ComreadInvitecodeBuy/index.css";


</style>
